<template>
  <div class="site">
    <div class="area">
      <el-button type="primary" @click="getData" link>获取数据</el-button>
      <el-button type="primary" @click="setData" link>设置数据</el-button>
    </div>
    <div class="design">
      <mmx-design  ref="designRef"></mmx-design>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import UserTask from './component/UserTask.vue'
import { NodeType } from '@mmx-ui-lib/mmx-ui-lib/types'
const designRef = ref()
const getData = () => {
  const dataObj = designRef.value.getData()
  console.log(dataObj)
  console.log(JSON.stringify(dataObj))
}
const setData = () => {
  const data = '{"definitionKey":"c8dcc9a2-cbd4-4b83-9fe6-45c19f13108e","nodes":[{"id":"9ce56d4c-cfe7-4109-92af-3b26eee160eb","type":"Start","x":240,"y":80,"properties":{"name":"开始"}},{"id":"441017ae-3ceb-45fb-af8d-cdbb49aac4c4","type":"UserTask","x":380,"y":80,"properties":{"name":"用户节点"}},{"id":"a55e050a-d4da-45fd-af9b-e0408390a26d","type":"End","x":520,"y":80,"properties":{"name":"结束"}}],"edges":[{"id":"cd425338-27c7-4706-a49c-90caa0367b26","type":"polyline","sourceNodeId":"9ce56d4c-cfe7-4109-92af-3b26eee160eb","targetNodeId":"441017ae-3ceb-45fb-af8d-cdbb49aac4c4","startPoint":{"x":265,"y":80},"endPoint":{"x":320,"y":80},"properties":{},"pointsList":[{"x":265,"y":80},{"x":295,"y":80},{"x":295,"y":80},{"x":290,"y":80},{"x":290,"y":80},{"x":320,"y":80}]},{"id":"984ded83-ec96-4029-8d41-71182ed97093","type":"polyline","sourceNodeId":"441017ae-3ceb-45fb-af8d-cdbb49aac4c4","targetNodeId":"a55e050a-d4da-45fd-af9b-e0408390a26d","startPoint":{"x":440,"y":80},"endPoint":{"x":495,"y":80},"properties":{},"pointsList":[{"x":440,"y":80},{"x":470,"y":80},{"x":470,"y":80},{"x":465,"y":80},{"x":465,"y":80},{"x":495,"y":80}]}]}'
  designRef.value.setData(data)
}
onMounted(() => {
  designRef.value.init()
  designRef.value.registerPropertyPanel(NodeType.USER_TASK, UserTask)
  designRef.value.flowRender({
    nodes: [

    ]
  })
})
</script>

<style scoped lang="scss">
.site {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .area{
    height: 50px;
  }
  .design{
    flex: 1;
    overflow: hidden;
  }
}
</style>
